<template>
  <lay-card>
    <lay-form :model="modelData">
      <lay-form-item style="text-align: center;">
        <lay-button size="sm" @click="jsonFormat">格式化</lay-button>
        <lay-button size="sm" @click="jsonNoFormat">压缩</lay-button>
        <lay-button size="sm" type="normal" @click="submit">保存</lay-button>
      </lay-form-item>
      <lay-form-item label="编号" prop="username">
        <lay-input v-model="modelData.rowNo" :disabled="!flag"></lay-input>
      </lay-form-item>
      <lay-form-item label="消息体" prop="desc">
        <v-ace-editor
          v-model:value="modelData.rawData"
          @init="jsonFormat"
          lang="json"
          :theme="aceConfig.theme"
          :options="aceConfig.options"
          :readonly="aceConfig.readOnly"
          style="height:400px;margin-top: 20px;"
          class="ace-editor"
        />
      </lay-form-item>
    </lay-form>
  </lay-card>
</template>

<script lang="ts">
export default {
  name: 'EditNews',
}
</script>

<script lang="ts" setup>
import {ref, reactive, onMounted} from "vue";
import { VAceEditor } from 'vue3-ace-editor';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/ext-language_tools';
import {addNews, updateNews} from "../../api/market/market";
import {notify} from "../../untils/tip";
import {BinaryInterface} from "../../store/market/BinaryInterface";

const modelData = reactive({rowNo: 0, rawData: ''})
const cancelMethod = ref()
const {protocol, flag, news, cancel} = defineProps({
  protocol: {type: String, default: 'binary'},
  flag: {type: Boolean, default: false},
  news: {type: Object, default: {rowNo: null, rowData: null, rawData: null}},
  cancel: {type: Function}
});

onMounted(() => {
  cancelMethod.value = cancel;
  if(flag){
    modelData.rowNo = news?.rowNo + 1;
  }else {
    modelData.rowNo = news?.rowNo;
  }
  modelData.rawData = news?.rawData;
  console.log("modelData:", modelData)
})

//ace编辑器配置
const aceConfig = reactive({
    lang: 'json', //解析json
    theme: 'chrome', //主题
    arr: [
        /*所有主题*/
        "ambiance",
        "chaos",
        "chrome",
        "clouds",
        "clouds_midnight",
        "cobalt",
        "crimson_editor",
        "dawn",
        "dracula",
        "dreamweaver",
        "eclipse",
        "github",
        "gob",
        "gruvbox",
        "idle_fingers",
        "iplastic",
        "katzenmilch",
        "kr_theme",
        "kuroir",
        "merbivore",
        "merbivore_soft",
        "monokai",
        "mono_industrial",
        "pastel_on_dark",
        "solarized_dark",
        "solarized_light",
        "sqlserver",
        "terminal",
        "textmate",
        "tomorrow",
        "tomorrow_night",
        "tomorrow_night_blue",
        "tomorrow_night_bright",
        "tomorrow_night_eighties",
        "twilight",
        "vibrant_ink",
        "xcode",
    ],
    readOnly: false, //是否只读
    options: {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        showPrintMargin: false,
        fontSize: 13
    }
});

const jsonError = (e: any) => {
    console.log(`JSON字符串错误：${e.message}`);
}

// JSON格式化
const jsonFormat = () => {
    try {
        modelData.rawData = JSON.stringify(JSON.parse(modelData.rawData), null, 2)
    } catch (e) {
        jsonError(e)
    }
};

// JSON压缩
const jsonNoFormat = () => {
    try {
        modelData.rawData = JSON.stringify(JSON.parse(modelData.rawData))
    } catch (e) {
        jsonError(e)
    }
};

const submit = async () => {
  jsonNoFormat();
  const params: BinaryInterface = reactive<BinaryInterface>({
    protocol: protocol,
    tableName: news.tableName,
    id: modelData.rowNo,
    rawData: modelData.rawData
  })
  if(flag){
    let {code, data, message} = await addNews(params);
    if(code === 200){
      notify('success', data.message);
      cancelMethod.value(params.rawData)
    }else {
      notify('fail', message);
    }
  }else {
    let {code, data, message} = await updateNews(params);
    if(code === 200){
      notify('success', data.message);
      cancelMethod.value(params.rawData)
    }else {
      notify('fail', message);
    }
  }
};

</script>

<style scoped>

</style>